<template>
  <div class="orderManage">
    <!-- 查询操作 -->
    <div class="my_search -ml-20px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="search_form" labelPosition="left">
        <el-form-item label="合同类型：" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同状态：" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同生效时间：" prop="region">
          <el-date-picker v-model="ruleForm.time" type="date" :clearable="false" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同创建时间：" prop="region">
          <el-date-picker v-model="ruleForm.time" type="date" :clearable="false" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同到期时间：" prop="region">
          <el-date-picker v-model="ruleForm.time" type="date" :clearable="false" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="所在省份：" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在城市：" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="submit_clear">
        <el-button class="bt_gray">查询</el-button>
        <el-button class="bt_White">清空</el-button>
      </div>
    </div>
    <!-- 订单列表 -->
    <el-row class="orderList">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
        <el-table-column prop="channelCode" label="渠道订单编号" />
        <el-table-column prop="llCode" label="联联订单编号" />
        <el-table-column prop="orderP" label="下单人" />
        <el-table-column prop="proName" label="产品名称" />
        <el-table-column prop="packageName" label="套餐名称" />
        <el-table-column prop="proCatagory" label="产品品类" />
        <el-table-column prop="singlePrice" label="单价" />
        <el-table-column prop="endPrice" label="渠道结算价" />
        <el-table-column prop="num" label="数量" />
        <el-table-column prop="orderMoney" label="订单金额" />
        <el-table-column prop="payTime" label="支付时间" />
        <el-table-column prop="orderStatus" label="订单状态" />
        <el-table-column prop="smallOrderNum" label="小订单数量" />
        <el-table-column prop="RefundOrderNum" label="退款订单量" />
        <el-table-column prop="retrivedNum" label="待取码数" />
        <el-table-column prop="paymentWay" label="支付方式" />
        <el-table-column prop="operations" label="操作" width="140">
          <el-button type="text" size="mini" @click="toOrderDetail(11)">订单详情</el-button>
          <!-- 申请退款需要判断当前订单的状态为待取码才显示 -->
          <el-button type="text" size="mini" @click="handlerHotPro">申请退款</el-button>
        </el-table-column>
      </el-table>
    </el-row>
    <!--申请退款的提示确认 -->
    <el-dialog :visible.sync="dialogVisible" width="20%">
      <span>{{ alertComfirm }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="bt_white">取 消</el-button>
        <el-button type="danger" @click="handlerRefund(11)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ordermanage",
  components: {},
  data() {
    return {
      ruleForm: { time: "", region: "" },
      rules: {},
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      tableData: [
        {
          channelCode: 123456,
          llCode: 8888,
          proName: "20店通用.一把骨汤锅，鲜脆可口、甜辣带劲",
          packageName: "中华小当家",
          orderP: "小朋友",
          proCatagory: "美食",
          singlePrice: 87,
          endPrice: 80,
          num: 5,
          orderMoney: 174,
          payTime: "2022/9/27 14:20:34",
          orderStatus: "待取码",
          smallOrderNum: 15,
          RefundOrderNum: 2,
          retrivedNum: 2,
          paymentWay: "支付宝",
          signStation: "成都站",
          proOnTime: "2022/07/22 18:34:00",
          proState: "售卖中",
          beneDistribution: "3 - 2 - 2",
          OnChannelSum: 67,
          realSales: 455,
          remain: 12,
        },
      ],
      multipleSelection: [],
      // 提示确认框
      dialogVisible: false,
      alertComfirm: "",
      // 上下架操作框显示与否
      isOnSheel: false,
    };
  },
  watch: {},
  methods: {
    // 下拉列表变换的事件
    handleSelectionChange(value) {
      console.log("gaibianle");
    },
    // 设置爆款的确认框
    handlerHotPro() {
      this.alertComfirm = "您正在进行退款申请操作，是否继续？";
      this.dialogVisible = true;
    },
    handlerOpenSheel() {
      // 打开上下架操作栏
      this.isOnSheel = true;
    },
    handlerCloseSheel(sheelState) {
      // 关闭上架操作栏
      this.isOnSheel = sheelState;
    },
    // 确定退款
    handlerRefund(id) {
      this.$message.success(`ID为${id}的订单，退款成功`);
      this.dialogVisible = false;
    },
    // 携带id跳转到订单详情页
    toOrderDetail(id) {
      this.$router.push({ path: "/orderDetail", query: { id } });
    },
  },
};
</script>

<style scoped lang="scss">
body {
  background: rgb(212, 209, 209);
}

.orderManage {
  width: 100%;
  background: #eee;
  padding: 10px;
  border-radius: 4px;

  .my_search {
    display: flex;
    justify-content: space-between;
  }

  .submit_clear {
    display: flex;
  }

  .el-button,
  .el-tag {
    padding-left: 10px;
    padding-right: 10px;
  }

  // 批量操作按钮
  .batchProcess,
  .search {
    margin-bottom: 10px;
  }

  // 订单列表表格
  .orderList {
    table {
      tr {
        .el-button {
          margin-left: 3px;
          padding: 0;
        }
      }
    }
  }

  .onOffSheel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 99;
  }
}
</style>
